<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SVG转为PNG工具</title>
        <meta charset="UTF-8">
        <meta name="description" content="SVG 在线转PNG图片工具"/>
        <meta content="always" name="referrer">
        <meta name="keywords" content="在线转PNG，PNG图片工具，图片工具，红微科技，RSD框架，Redjs框架">
        <link rel="icon" href="//www.redjs.cn/resources/svg/rsd_red.svg">
        <link rel="shortcut icon" href="//www.redjs.cn/resources/svg/rsd_red.svg" type="image/x-icon" />

        <script type="text/javascript" src="./resources/js/FileSaver.min.js"></script>
        <script type="text/javascript" src="./resources/js/canvas-to-blob.min.js"></script>
    </head>
    <body> 
        <div style="height: 60px;width: 100%;">
            画布背景色：<input id="bg_color" style="height: 30px;width: 120px;" value="#01ad01"></input>
            高度：<input id="target_height" style="height: 30px;width: 120px;"></input>
            宽度：<input id="target_width" style="height: 30px;width: 120px;"></input>
            <button id="btn_update"  style="height:40px;width:160px;">设 置</button>
            文件名后缀：<input id="file_name_suffix" style="height: 30px;width: 120px;"></input>
            <button id="btn_download"  style="height:40px;width:160px;">下载PNG</button>
            <span id="svg_info" style="width:100%;"></span>
        </div>  
       
        <div style="display: flex;width: 100%;height: auto;">
            <div id="svg_container" style="background-color: #01ad01;">
            </div> 
        </div>
        <div style="width:100%;">
            <textarea name="" id="source_code" cols="30" rows="40" style="width:100%;">
                <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <g class="layer">
                     <title>Layer 1</title>
                     <path stroke="null" id="svg_2" d="m150.00002,250.50008c-55.80119,0 -101.00012,-44.97511 -101.00012,-100.50003c0,-55.52495 45.19894,-100.50012 101.00012,-100.50012c55.80118,0 101.00011,44.97517 101.00011,100.50012c0,55.52492 -45.19893,100.50003 -101.00011,100.50003z" opacity="undefined" fill="#01ad01"/>
                     <path stroke="null" id="svg_3" d="m119.17018,138.63077l-27.1861,0l0,-5.89113l27.1861,0l0,5.89113zm0,9.35995l-27.1861,0l0,-6.01425l27.1861,0l0,6.01425zm0,9.51718l-27.1861,0l0,-6.15787l27.1861,0l0,6.15787zm-31.51011,-28.33299l0,31.75404l35.97132,0l0,-31.75404l-20.59032,0c0.2677,-1.77207 0.61083,-3.76313 0.88537,-5.8773l27.52242,0l0,-4.24207l-26.91154,0c0.28138,-2.12103 0.48729,-4.24889 0.76183,-6.22623l-5.22308,-0.34211c-0.06178,1.91576 -0.26768,4.2489 -0.4667,6.56834l-28.01659,0l0,4.24207l27.59794,0c-0.2059,2.11418 -0.41183,4.10522 -0.68636,5.8773l-10.84428,0l0,0l0,0l0,0zm44.33103,37.9734l-52.28574,0l0,-36.0439l-4.46125,0l0,43.91226l4.46125,0l0,-3.68788l52.28574,0l0,-4.18048l0,0l0,0zm0,0" fill="#ffffff"/>
                     <g stroke="null" id="svg_12">
                      <path stroke="null" d="m225.37683,169.53143l-58.95993,0c-8.28905,0 -15.14227,3.76784 -15.14227,8.40013c0,0 -0.06709,7.82832 0,8.21062c0.84894,4.67014 7.12697,8.59991 15.30968,8.92018c0.35753,0.01381 33.563,0 33.563,0c10.04266,0 18.21423,-5.03864 18.21423,-11.23116l0,-6.96048l-7.28909,0l0,6.96048c0,3.71623 -4.90401,6.74011 -10.9252,6.74011l-33.56294,0c-4.23935,-0.30307 -7.64653,-2.14561 -8.48984,-4.66676l0,-7.97299c0,-2.56245 3.73653,-4.64955 8.32219,-4.64955l58.96017,0c4.58551,0 8.31671,2.0871 8.31671,4.64955l0,20.78839c0,2.62451 -3.85957,4.64952 -8.31671,4.64952l-4.61928,0l4.33443,7.97307l-12.86897,-7.97307l-49.04008,-0.00691c-2.13376,0 -3.87085,0.84045 -3.87085,1.87703c0,1.02292 1.73709,1.87704 3.87085,1.87704l47.47063,0l16.62794,10.30815c5.65242,3.50262 8.19388,2.53825 5.64671,-2.14906l-4.52966,-8.32774c6.84775,-0.78535 12.00865,-4.17427 12.00865,-8.22803l0,-20.78839c0,-4.63229 -6.74161,-8.40013 -15.03036,-8.40013" fill="#007fff" fill-rule="nonzero" id="svg_8"/>
                      <path stroke="null" d="m219.85374,169.53143l-55.41905,0c-7.79115,0 -14.23276,3.48698 -14.23276,7.77411c0,0 -0.06317,7.24486 0,7.59869c0.79794,4.3221 6.69901,7.95894 14.39018,8.25534c0.33607,0.01279 31.5473,0 31.5473,0c9.43961,0 17.12047,-4.66309 17.12047,-10.3941l0,-6.44174l-6.85136,0l0,6.44174c0,3.43925 -4.60948,6.23778 -10.2691,6.23778l-31.54733,0c-3.98468,-0.28052 -7.18727,-1.9857 -7.98,-4.31892l0,-7.37878c0,-2.37144 3.5123,-4.30301 7.82254,-4.30301l55.41911,0c4.31027,0 7.81732,1.93156 7.81732,4.30301l0,19.23906c0,2.42888 -3.62776,4.30298 -7.81732,4.30298l-4.34169,0l4.07402,7.37881l-12.09598,-7.37881l-46.09509,-0.00645c-2.00557,0 -3.63832,0.77786 -3.63832,1.73721c0,0.9467 1.6328,1.73712 3.63832,1.73712l44.61975,0l15.62933,9.53996c5.31299,3.24156 7.70184,2.34901 5.30771,-1.98894l-4.25772,-7.70706c6.43654,-0.72681 11.28738,-3.86314 11.28738,-7.61482l0,-19.23906c0,-4.28703 -6.33665,-7.77411 -14.12772,-7.77411" fill="#fcfcfc" fill-rule="nonzero" id="svg_16"/>
                     </g>
                     <path stroke="null" id="svg_4" d="m204.91228,136.49637l-43.86784,0l0,6.80812l43.86784,0l0,-6.80812z" opacity="NaN" fill="#ffffff"/>
                     <path stroke="null" id="svg_5" d="m206.03294,102.8115l-46.10921,-0.34338l0,6.93176l46.10921,0l0,-6.58838l0,0z" opacity="NaN" fill="#ffffff"/>
                     <path stroke="null" id="svg_6" d="m143.01941,119.09559l0,7.17948l78.16727,0l0,-7.17948l-78.16727,0z" opacity="NaN" fill="#ffffff"/>
                     <path stroke="null" id="svg_1" d="m204.91228,152.72528l-43.86784,0l0,6.80809l43.86784,0l0,-6.80809z" opacity="NaN" fill="#ffffff"/>
                    </g> 
                   </svg>
            </textarea>
        </div>
        <script type="text/javascript" lang="zh-cn" language="javascript">
            
            var container = document.getElementById("svg_container");
            container.innerHTML = document.getElementById("source_code").value;
            
            var ctrl = container.children[0];
            var width = ctrl.getAttributeNS(null,"width");
            var height = ctrl.getAttributeNS(null,"height");
            ctrl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

           
            container.style.height = height + 'px';
            container.style.width = width + 'px';

            var svg_info = document.getElementById('svg_info');
            svg_info.innerHTML = "原始尺寸:" + width + " * " + height;
            //
            document.getElementById('btn_download').onclick = function(e) {

                e.preventDefault();

                //container.innerHTML = document.getElementById("source_code").value;

                var ctrl = container.children[0];
              
                var width = ctrl.getAttributeNS(null,"width");
                var height = ctrl.getAttributeNS(null,"height");

                var targetH = document.getElementById("target_height").value || width;
                var targetW = document.getElementById("target_width").value || height;

                var data = new XMLSerializer().serializeToString(ctrl);
                var svg = new Blob([data], {type:"image/svg+xml;charset=utf-8" });
                var url = URL.createObjectURL(svg);
                //
                var img = document.createElement('img');
                img.width = targetW;
                img.height = targetH;
                img.onload = function() {
                        var suffix = document.getElementById('file_name_suffix').value;
                        var canvas = document.createElement('canvas');
                        canvas.width = targetW;
                        canvas.height = targetH;
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        canvas.toBlob(function(blob) {
                            window.saveAs(blob,targetW+ "_" + targetH + "_" + suffix + ".png");
                        });
                    };
                img.setAttribute('src', url);

            };
            //
            document.getElementById('btn_update').onclick = function(e)
            {
                container.innerHTML = document.getElementById("source_code").value;
                container.style.backgroundColor = document.getElementById("bg_color").value;
                var ctrl = container.children[0];

                var width = ctrl.getAttributeNS(null,"width");
                var height = ctrl.getAttributeNS(null,"height");

                var targetH = document.getElementById("target_height").value || width;
                var targetW = document.getElementById("target_width").value || height;

                var scale_w = targetW/width;
                var scale_h = targetH/height;

                container.style.height = targetH + 'px';
                container.style.width = targetW + 'px';
                //console.log(scale_w,scale_h);
                //console.log(ctrl.children[0]);
                ctrl.children[0].setAttributeNS(null,"transform-origin","center");
                ctrl.children[0].setAttributeNS(null,"transform","scale(" + scale_w + " " + scale_h +")");

                var viewBox = (width-targetW) * scale_w /2 + " " + (height-targetH) * scale_h/2 +  " "+ targetW + " " + targetH;
                //var viewBox = "0 0 "+ targetW + " " + targetH;
                ctrl.setAttributeNS(null,"width",targetW);
                ctrl.setAttributeNS(null,"height",targetH);
                ctrl.setAttributeNS(null,"viewBox",viewBox);
            }

            // //入口
            // var main = function()
            // {
            //     var app = this;
            //     app.checkSessionServiceName = "mission.account.checksession"; 
            //     app.loginServiceName = "";
            //     //获取AccessToken 
            //     //
            //     var key =  Rsd.getUrlParam(window.location.search.substr(1),"key");
            //     var mdEditHeight = document.body.clientHeight - 90;
            //     //展示窗体
            //     Rsd.create('Rsd.tool.HtmlShareBox',{
            //             doc:{
            //                 Id:'',
            //                 Key:key,
            //                 Name:'',
            //             },
            //             key:key,
            //             float:false,
            //             header:false,
            //             width:'100%',
            //             height:'100%',
            //             data:'#this is share page',
            //             fileDownloadServiceName:'aliyun.merch.oss.cms.download',  
                        
            //     }).showDialog();
            // }
        
        </script>
    </body>
</html>